<template>
  <div class="groupbuying-list">
    <Row type="flex" justify="start" class="coinrevenue-list-edit">
      <Form class="from" :model="searchObj" ref="search" label-position="left" inline>
        <FormItem :label-width="50">
          <div slot="label" style="transform: translateX(12px);">时间：</div>
          <datePickerYmd
            @on-change="search"
            :dateOption="dateOption"
            :selectDateType.sync="selectDateType "
            v-model="timeDate"
          ></datePickerYmd>
        </FormItem>

        <FormItem :label-width="72">
          <div slot="label" style="transform: translateX(12px);">门店名称：</div>
          <!-- <vueTreeselectShop
            :shopList.sync="searchObj.shopId"
            @id-change="search"
            permissionCode="moms:report:groupbuyanalytics"
            v-model="ShopValue"
          ></vueTreeselectShop>-->

          <vueTreeselectChoice
            :max-tag-count='1'
            componentsType='iselect'
            :filterable="true"
            @on-change="handleShop"
            @on-api-finish="apiFinish"
            permissionCode="moms:report:groupbuyanalytics"
            v-model="searchObj.shopId"
          ></vueTreeselectChoice>
        </FormItem>

        <FormItem>
          <Button type="primary" class="coinrevenue-btn" @click="search('search')">查询</Button>
        </FormItem>
      </Form>
    </Row>
    <!-- :loading="isloading" -->
    <Table :loading="isloading" stripe ref="rowSpanTable" border :columns="columns" :data="resData">
      <template slot-scope="{ row,  }" slot="shopName">
        <div class="table-link">
          <!-- <router-link :to="`/report_shop/groupbuying/detail/${row.shopId}`" >:id/:startTime/:endTim</router-link> -->
          <router-link
            :to="{ name: 'report_shop_groupbuying_detail', params: { id: row.shopId, startTime:startDate, endTime:endDate }}"
          >{{ row.shopName }}</router-link>
        </div>
      </template>
    </Table>
    <!-- <div class="page-box" style="margin-top: 20px">
      <Page
        :total="total"
        ref="pages"
        :current.sync="searchObj.pageIndex"
        :page-size="searchObj.limit"
        @on-change="handlePage"
        @on-page-size-change="handlePageSize"
        show-sizer
        show-total
      />
    </div> -->
  </div>
</template>
<script>
// import { rowSpanTable, formatRowspanData } from '@/libs/rowspan'

import { shopGroupBuyingQuery } from '@/api/report/shop'
import vueTreeselectChoice from '@/components/vue-treeselect-choice'
import datePickerYmd from '@/components/date-picker-ymd/date-picker-ymd.vue'
import dayjs from 'dayjs'
export default {
  name: 'report_shop_groupbuying',
  components: {
    datePickerYmd,
    vueTreeselectChoice
  },
  data () {
    return {
      total: 0,
      isloading: false,
      timeDate: [dayjs().format('YYYY-MM-DD 00:00:00'), dayjs().format('YYYY-MM-DD 00:00:00')],
      selectDateType: 'daterange',
      searchObj: {
        offset: 0,
        limit: 10,
        pageIndex: 1,
        pageSize: 10,
        shopId: ''
      },
      dateOption: {
        disabledDate: date => {
          return dayjs(date).isAfter(dayjs(new Date()))
        }
      },
      columns: [
        // { title: '门店', key: 'shopName', align: 'center', width: 185, fixed: 'left' },
        { title: '门店', key: 'shopName', align: 'center', slot: 'shopName' },

        { title: '取币数', key: 'withdrawNum', align: 'center' }
      ],
      resData: []
    }
  },
  computed: {
    startDate () {
      return this.timeDate[0]
    },
    endDate () {
      if (this.selectDateType === 'daterange') {
        return dayjs(this.timeDate[1])
          .add(1, 'day')
          .format('YYYY-MM-DD 00:00:00')
      }
      return this.timeDate[1]
    }
  },

  async created () {
    if (this.$store.state.user.orgType === 1) {
      this.searchObj.shopId = this.$store.state.user.orgId
      this.shopGroupBuyingQuery()
    }
  },
  mounted () {},

  methods: {
    // 门店改变
    async handleShop () {
      this.searchObj.offset = 0
      this.searchObj.pageIndex = 1
      this.search()
    },
    handlePage (val) {
      this.searchObj.offset = (val - 1) * this.searchObj.limit
      this.shopGroupBuyingQuery()
    },
    handlePageSize (val) {
      this.searchObj.limit = val
      this.searchObj.offset = 0
      this.shopGroupBuyingQuery()
    },
    apiFinish (isId) {
      // this.ShopValue = this.$store.state.user.orgId
      // this.ShopValue = [this.$store.state.user.orgId]
    },
    validateSearchForm (data = this.searchObj) {
      if (!dayjs(this.startDate).isValid()) return '请选择时间'
      if (!data.shopId) return '请选择门店'
      return true
    },
    search (name) {
      this.searchObj.offset = 0
      this.searchObj.pageIndex = 1
      this.shopGroupBuyingQuery()
    },

    async shopGroupBuyingQuery (
      data = {
        merchantId: this.$store.state.user.merchantId,
        shopIds: [this.searchObj.shopId],
        startDate: this.startDate,
        endDate: this.endDate,
        offset: this.searchObj.offset,
        limit: this.searchObj.limit
      }
    ) {
      if (this.validateSearchForm() !== true) return this.$Message.error(`${this.validateSearchForm()}`)
      this.isloading = true
      try {
        const res = await shopGroupBuyingQuery(data)
        this.isloading = false
        if (res.data.status !== 200) return this.$Message.error(`${res.data.error}`)
        this.resData = res.data.data || []
        this.total = res.data.totalCount
      } catch (error) {
        this.isloading = false
        this.$Message.error(`${error}`)
      }
    }
  }
}
</script>
<style lang="less" scoped>
.groupbuying-list {
  .table-link {
    width: 100%;
    height: 100%;
    font-size: 12px;
    letter-spacing: 0;
    a {
      color: #464c5b;
      border-bottom: 1px solid #fff;
      border-bottom-width: 0;
      &:hover {
        color: #2d8cf0;
        border-bottom-width: 1px;
        border-bottom-color: #2d8cf0;
      }
    }
  }
  .coinrevenue-list-edit {
    padding-left: 20px;
  }
  .from {
    margin-top: 24px;
  }
}
.select {
  width: 300px;
}
</style>

<style lang="less" scoped>
.groupbuying-list {
  .coinrevenue-list-edit {
    padding: 0 24px;
    height: 80px;
    .export-btn {
      margin-left: 24px;
    }
  }
}
</style>
<style lang="less">
.select-shop-item {
  height: 35px;
  width: 210px;
  .ivu-select-selection {
    height: 35px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .ivu-tag {
    max-width: 100px;
  }
}
</style>
